<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>填写业务单</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <!-- 基础信息 -->
      <a-card :bordered="false" style="margin-top:24px;">
        <div class="card-title">基础信息</div>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="客户名称" prop="custId">
              <!-- <a-auto-complete @select="onSelect" @search="onSearch">
                <template slot="dataSource">
                  <a-select-option
                    v-for="(record,index) in custNameList"
                    :key="index"
                    :value="record.name"
                  >{{ record.name }}</a-select-option>
                </template>
              </a-auto-complete>-->
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.custId"
                @search="onSearch"
                @select="onSelect"
              >
                <a-select-option v-for="d in custNameList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="箱型" prop="containerTypeId">
              <a-select v-model="form.containerTypeId">
                <a-select-option value>请选择箱型</a-select-option>
                <a-select-option
                  v-for="(item,index) in containerList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="货名" prop="goodsName">
              <!-- <a-input v-model="form.goodsName" /> -->
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.goodsName"
                @search="goodsListChange"
                @select="goodsSelect"
              >
                <a-select-option key>请选择</a-select-option>
                <a-select-option v-for="d in goodsList" :key="d.name">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="结算类型" prop="settlementType">
              <template v-if="selectObj.settlementType === 1">
                <a-select v-model="form.settlementType" disabled>
                  <a-select-option :value="1">票结</a-select-option>
                </a-select>
              </template>
              <template v-else>
                <a-select v-model="form.settlementType" disabled>
                  <a-select-option v-for="v in settlementTypeList" :key="v.key">{{v.value}}</a-select-option>
                </a-select>
              </template>
              <!-- <a-select v-model="form.settlementType">
                <a-select-option v-for="v in settlementTypeList" :key="v.key">{{v.value}}</a-select-option>
              </a-select>-->
              <!-- <template>
                <span v-if="selectObj.settlementType === 1">票结</span>
                <span v-else-if="selectObj.settlementType === 2">月结</span>
                <span v-else></span>
              </template>-->
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="订单类型" prop="orderType">
              <a-select v-model="form.orderType">
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="DOMESTIC_TRADE_EXPORTS">内贸出口订单</a-select-option>
                <a-select-option value="DOMESTIC_TRADE_IMPORTS">内贸进口订单</a-select-option>
                <a-select-option value="FOREIGN_TRADE_EXPORTS">外贸出口订单</a-select-option>
                <a-select-option value="FOREIGN_TRADE_IMPORTS">外贸进口订单</a-select-option>
                <a-select-option value="UNITED_TRANSPORT_EXPORTS">联运出口订单</a-select-option>
                <a-select-option value="UNITED_TRANSPORT_IMPORTS">联运进口订单</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="箱量" prop="containerNum">
              <a-input-number v-model="form.containerNum" :min="1" :max="999" style="width:100%" />
            </a-form-model-item>
            <!-- <a-form-model-item label="发票" prop="invoiceType"> -->
            <a-row>
              <a-col :span="16">
                <a-form-model-item
                  :labelCol="{span:12}"
                  :wrapperCol="{span:12}"
                  label="发票"
                  prop="invoiceType"
                >
                  <a-select v-model="form.invoiceType">
                    <a-select-option value>请选择开票类型</a-select-option>
                    <a-select-option value="1">增值税专用发票</a-select-option>
                    <a-select-option value="2">增值税普通发票</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8" style="padding-left:8px;">
                <a-form-model-item :wrapperCol="{span:24}" label prop="taxRate">
                  <a-select v-model="form.taxRate">
                    <a-select-option value>请选择税率</a-select-option>
                    <a-select-option v-if="form.invoiceType==='2'" :value="0">0%</a-select-option>
                    <a-select-option :value="6">6%</a-select-option>
                    <a-select-option :value="9">9%</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <!-- </a-form-model-item> -->
            <a-form-model-item label="操作员" prop="handlerId">
              <a-select v-model="form.handlerId">
                <a-select-option value>请选择操作员</a-select-option>
                <a-select-option
                  v-for="(item,index) in handlerList"
                  :key="index"
                  :value="item.uiId"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
      <!-- 运输信息 -->
      <a-card :bordered="false">
        <div class="card-title">运输信息</div>
        <a-form-model-item
          label="运输条款"
          :label-col="{span:3}"
          :wrapper-col="{span:21}"
          prop="transportTerms"
        >
          <a-radio-group
            v-model="form.transportTerms"
            @change="radioChange"
            button-style="solid"
            size="large"
          >
            <a-radio-button value="DO-DO">门到门</a-radio-button>
            <a-radio-button value="DO-CY">门到港</a-radio-button>
            <a-radio-button value="CY-DO">港到门</a-radio-button>
            <a-radio-button value="CY-CY">港到港</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <template>
          <!-- 门到门 -->
          <div v-if="form.transportTerms=== 'DO-DO'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="起运港" prop="startPortId">
                    <a-select
                      show-search
                      :show-arrow="false"
                      :filter-option="false"
                      :default-active-first-option="false"
                      :not-found-content="null"
                      v-model="form.startPortId"
                      @search="startPortChange"
                      @select="portListReset"
                    >
                      <a-select-option key>请选择</a-select-option>
                      <a-select-option v-for="d in startPortList" :key="d.id">{{ d.name }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                    <a-input v-model="form.consignor" :max-length="10" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="发货地址" prop="consignorProvince">
                    <a-cascader
                      :options="options"
                      :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                      placeholder="请选择省/市/区县"
                      @change="onChange"
                    />
                  </a-form-model-item>
                  <a-form-model-item label="详细地址" prop="consignorAddress">
                    <a-input v-model="form.consignorAddress" :max-length="100" />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consignorPhone">
                    <a-input v-model="form.consignorPhone" :max-length="20" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="目的港" prop="endPortId">
                    <a-select
                      show-search
                      :show-arrow="false"
                      :filter-option="false"
                      :default-active-first-option="false"
                      :not-found-content="null"
                      v-model="form.endPortId"
                      @search="endPortChange"
                      @select="portListReset"
                    >
                      <a-select-option key>请选择</a-select-option>
                      <a-select-option v-for="d in endPortList" :key="d.id">{{ d.name }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                    <a-input v-model="form.consignee" :max-length="10" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="收货地址" prop="consigneeProvince">
                    <a-cascader
                      :options="options"
                      :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                      placeholder="请选择省/市/区县"
                      @change="onChange2"
                    />
                  </a-form-model-item>
                  <a-form-model-item label="详细地址" prop="consigneeAddress">
                    <a-input v-model="form.consigneeAddress" :max-length="100" />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consigneePhone">
                    <a-input v-model="form.consigneePhone" :max-length="20" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <!-- 门到港 -->
          <div v-else-if="form.transportTerms=== 'DO-CY'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="起运港" prop="startPortId">
                    <a-select
                      show-search
                      :show-arrow="false"
                      :filter-option="false"
                      :default-active-first-option="false"
                      :not-found-content="null"
                      v-model="form.startPortId"
                      @search="startPortChange"
                      @select="portListReset"
                    >
                      <a-select-option key>请选择</a-select-option>
                      <a-select-option v-for="d in startPortList" :key="d.id">{{ d.name }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                    <a-input v-model="form.consignor" :max-length="10" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="发货地址" prop="consignorProvince">
                    <a-cascader
                      :options="options"
                      :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                      placeholder="请选择省/市/区县"
                      @change="onChange"
                    />
                  </a-form-model-item>
                  <a-form-model-item label="详细地址" prop="consignorAddress">
                    <a-input v-model="form.consignorAddress" :max-length="100" />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consignorPhone">
                    <a-input v-model="form.consignorPhone" :max-length="20" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="目的港" prop="endPortId">
                    <a-select
                      show-search
                      :show-arrow="false"
                      :filter-option="false"
                      :default-active-first-option="false"
                      :not-found-content="null"
                      v-model="form.endPortId"
                      @search="endPortChange"
                      @select="portListReset"
                    >
                      <a-select-option key>请选择</a-select-option>
                      <a-select-option v-for="d in endPortList" :key="d.id">{{ d.name }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                    <a-input v-model="form.consignee" :max-length="10" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="收货人抬头" prop="consigneeTitle">
                    <a-input v-model="form.consigneeTitle" :max-length="50" />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consigneePhone" style="margin-top:44px;">
                    <a-input v-model="form.consigneePhone" :max-length="20" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <!-- 港到门 -->
          <div v-else-if="form.transportTerms=== 'CY-DO'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="起运港" prop="startPortId">
                    <a-select
                      show-search
                      :show-arrow="false"
                      :filter-option="false"
                      :default-active-first-option="false"
                      :not-found-content="null"
                      v-model="form.startPortId"
                      @search="startPortChange"
                      @select="portListReset"
                    >
                      <a-select-option key>请选择</a-select-option>
                      <a-select-option v-for="d in startPortList" :key="d.id">{{ d.name }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                    <a-input v-model="form.consignor" :max-length="10" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="联系电话" prop="consignorPhone" style="margin-top:84px;">
                    <a-input v-model="form.consignorPhone" :max-length="20" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="目的港" prop="endPortId">
                    <a-select
                      show-search
                      :show-arrow="false"
                      :filter-option="false"
                      :default-active-first-option="false"
                      :not-found-content="null"
                      v-model="form.endPortId"
                      @search="endPortChange"
                      @select="portListReset"
                    >
                      <a-select-option key>请选择</a-select-option>
                      <a-select-option v-for="d in endPortList" :key="d.id">{{ d.name }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                    <a-input v-model="form.consignee" :max-length="10" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="收货地址" prop="consigneeProvince">
                    <a-cascader
                      :options="options"
                      :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                      placeholder="请选择省/市/区县"
                      @change="onChange2"
                    />
                  </a-form-model-item>
                  <a-form-model-item label="详细地址" prop="consigneeAddress">
                    <a-input v-model="form.consigneeAddress" :max-length="100" />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consigneePhone">
                    <a-input v-model="form.consigneePhone" :max-length="20" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <!-- 港到港 -->
          <div v-else-if="form.transportTerms=== 'CY-CY'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="起运港" prop="startPortId">
                    <a-select
                      show-search
                      :show-arrow="false"
                      :filter-option="false"
                      :default-active-first-option="false"
                      :not-found-content="null"
                      v-model="form.startPortId"
                      @search="startPortChange"
                      @select="portListReset"
                    >
                      <a-select-option key>请选择</a-select-option>
                      <a-select-option v-for="d in startPortList" :key="d.id">{{ d.name }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                    <a-input v-model="form.consignor" :max-length="10" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="联系电话" prop="consignorPhone" style="margin-top:84px;">
                    <a-input v-model="form.consignorPhone" :max-length="20" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="目的港" prop="endPortId">
                    <a-select
                      show-search
                      :show-arrow="false"
                      :filter-option="false"
                      :default-active-first-option="false"
                      :not-found-content="null"
                      v-model="form.endPortId"
                      @search="endPortChange"
                      @select="portListReset"
                    >
                      <a-select-option key>请选择</a-select-option>
                      <a-select-option v-for="d in endPortList" :key="d.id">{{ d.name }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                    <a-input v-model="form.consignee" :max-length="10" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="收货人抬头" prop="consigneeTitle">
                    <a-input v-model="form.consigneeTitle" :max-length="50" />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consigneePhone" style="margin-top:44px;">
                    <a-input v-model="form.consigneePhone" :max-length="20" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
        </template>
        <a-row :gutter="[20]" style="margin-top:20px">
          <a-col :span="12">
            <a-form-model-item
              label="装货时间"
              prop="loadingTime"
              :label-col="{span:6}"
              :wrapper-col="{span:18}"
            >
              <a-date-picker
                @change="onChangeTime"
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
              >
                <a-icon slot="suffixIcon" type="calendar" />
              </a-date-picker>
            </a-form-model-item>
            <a-form-model-item label="备注" :label-col="{span:6}" :wrapper-col="{span:18}">
              <a-input
                v-model="form.sellerRemark"
                type="textarea"
                :auto-size="{ minRows: 3, maxRows: 3 }"
                :max-length="200"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
      <!-- 费用信息 -->
      <a-card :bordered="false">
        <div class="card-title">费用信息</div>
        <!-- 应收 -->
        <div class="iconTextMix">
          <img src="@@/images/icon-s.png" alt />
          <span>应收</span>
        </div>
        <a-row :gutter="[20]">
          <a-col :span="12">
            <a-form-model-item label="应收客户（元/箱）" prop="receivableCustAmount">
              <a-row>
                <a-col :span="16">
                  <a-input-number
                    :min="0"
                    :max="999999999999.99"
                    :precision="2"
                    v-model="form.receivableCustAmount"
                    style="width:100%"
                  />
                </a-col>
                <a-col :span="8" style="padding-left:8px;">
                  <a-select v-model="form.receivableCustCurrency">
                    <a-select-option value="CNY">CNY</a-select-option>
                    <a-select-option value="USD">USD</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[20]" v-if="form.orderType === 'DOMESTIC_TRADE_IMPORTS'">
          <a-col :span="12">
            <a-form-model-item label="应收海船费用(元/箱)">
              <a-input-number
                :min="0"
                :max="999999999999.99"
                :precision="2"
                v-model="form.receivableShipAmount"
                style="width:100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="海船公司">
              <!-- <a-auto-complete @select="onSelect2" @search="onSearch2">
                <template slot="dataSource">
                  <a-select-option
                    v-for="(record,index) in receiveList"
                    :key="index"
                    :value="record.name"
                  >{{ record.name }}</a-select-option>
                </template>
              </a-auto-complete>-->
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.receivableShipId"
                @search="onSearch2"
              >
                <a-select-option key>请选择</a-select-option>
                <a-select-option v-for="d in receiveList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 应付 -->
        <div class="iconTextMix">
          <img src="@@/images/icon-f.png" alt />
          <span>应付</span>
        </div>
        <a-row :gutter="[20]">
          <a-col :span="12">
            <a-form-model-item label="应付海船费用(元/箱)" prop="payableShipAmount">
              <a-row>
                <a-col :span="16">
                  <a-input-number
                    :min="0"
                    :max="limitPrice"
                    :precision="2"
                    v-model="form.payableShipAmount"
                    style="width:100%"
                  />
                </a-col>
                <a-col :span="8" style="padding-left:8px;">
                  <a-select v-model="form.payableShipCurrency">
                    <a-select-option value="CNY">CNY</a-select-option>
                    <a-select-option value="USD">USD</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item label="始拖车费（元/箱）" prop="payableStartTruckAmount">
              <a-input-number
                :min="0"
                :max="999999999999.99"
                :precision="2"
                v-model="form.payableStartTruckAmount"
                style="width:100%"
              />
            </a-form-model-item>
            <a-form-model-item label="终拖车费（元/箱）" prop="payableEndTruckAmount">
              <a-input-number
                :min="0"
                :max="999999999999.99"
                :precision="2"
                v-model="form.payableEndTruckAmount"
                style="width:100%"
              />
            </a-form-model-item>
            <a-form-model-item label="保险费（元/箱）">
              <div class="clickOnlyInput" @click="showModal">{{calcResult}}</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="海船公司" prop="payableShipId">
              <!-- <a-auto-complete @select="onSelect3" @search="onSearch3">
                <template slot="dataSource">
                  <a-select-option
                    v-for="(record,index) in payList"
                    :key="index"
                    :value="record.name"
                  >{{ record.name }}</a-select-option>
                </template>
              </a-auto-complete>-->
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.payableShipId"
                @search="onSearch3"
              >
                <a-select-option key>请选择</a-select-option>
                <a-select-option v-for="d in payList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="始拖车公司" prop="payableStartTruckId">
              <!-- <a-auto-complete @select="onSelect4" @search="onSearch3">
                <template slot="dataSource">
                  <a-select-option
                    v-for="(record,index) in payList"
                    :key="index"
                    :value="record.name"
                  >{{ record.name }}</a-select-option>
                </template>
              </a-auto-complete>-->
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.payableStartTruckId"
                @search="onSearch3"
              >
                <a-select-option key>请选择</a-select-option>
                <a-select-option v-for="d in payList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="终拖车公司" prop="payableEndTruckId">
              <!-- <a-auto-complete @select="onSelect5" @search="onSearch3">
                <template slot="dataSource">
                  <a-select-option
                    v-for="(record,index) in payList"
                    :key="index"
                    :value="record.name"
                  >{{ record.name }}</a-select-option>
                </template>
              </a-auto-complete>-->
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.payableEndTruckId"
                @search="onSearch3"
              >
                <a-select-option key>请选择</a-select-option>
                <a-select-option v-for="d in payList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
      <!-- 合同 -->
      <a-card :bordered="false" class="yewu_photo">
        <div class="card-title">货物托运委托书</div>
        <a-form-model-item prop="contractPics" :wrapperCol="{span:24}">
          <upload
            :uploadName="'contractPics'"
            :optList="form.contractPics ? form.contractPics.split(',') : []"
            :length="100"
            @uploadFile="contractPics"
          ></upload>
        </a-form-model-item>
      </a-card>
      <a-modal
        v-model="visible"
        title="保险费"
        :body-style="{padding:'40px 40px 20px 20px'}"
        :width="650"
        centered
        @cancel="insuranceCancel"
        @ok="insuranceOk"
        destroyOnClose
      >
        <a-form-model-item label="货值（元/箱）" prop="payableInsuranceAmount">
          <!-- <a-input v-model="form.payableInsuranceAmount" @change="calcTotalPrice" /> -->
          <a-input-number
            :min="0"
            :max="999999999999.99"
            :precision="2"
            v-model="form.payableInsuranceAmount"
            style="width:100%"
            @change="calcTotalPrice"
          />
        </a-form-model-item>
        <a-form-model-item label="选择保险公司" prop="payableInsuranceId">
          <a-select v-model="form.payableInsuranceId" style="width:100%" @select="insuranceSelect">
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(item,index) in insuranceList"
              :key="index"
              :value="item.custId"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="保险费率">{{insuranceRate}}{{insuranceRate ? '%': ''}}</a-form-model-item>
        <a-form-model-item label="保险金额（元/箱）">{{calcResult}}</a-form-model-item>
      </a-modal>
    </a-form-model>
    <div class="creat_button">
      <a-button
        type="primary"
        :loading="createStatus"
        @click="save"
        style="float:right;margin-top:12px"
      >提交</a-button>
    </div>
  </div>
</template>
<script>
import {mixin} from '@/common/common'
import {
  queryCustNameList,
  queryPortNameList,
  queryContainerTypeList,
  queryCustInsuranceDown,
  addOrderInfo,
  getValidContractPics,
  queryGoodsData,
  getPriceLimitInfo
} from '@/api/salesCenter'
import { queryBaseAreaList, querySellerDown } from '@/api'
import _ from 'lodash/debounce'
import upload from '@/components/UpLoad'

const formMessage = `必填项不能为空`
export default {
  mixins: [mixin],
  data () {
    this.onSearch = _(this.onSearch, 800)
    this.onSearch2 = _(this.onSearch2, 800)
    this.onSearch3 = _(this.onSearch3, 800)
    this.goodsListChange = _(this.goodsListChange, 800)
    this.startPortChange = _(this.startPortChange, 800)
    this.endPortChange = _(this.endPortChange, 800)
    return {
      custNameList: [], // 1
      receiveList: [], // 2
      payList: [], // 3
      containerList: [],
      startPortList: [],
      endPortList: [],
      options: [],
      handlerList: [],
      insuranceList: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      selectObj: {},
      form: {
        sellerId: '', // 模拟
        // 基础信息
        custId: '',
        containerTypeId: '',
        goodsName: '',
        settlementType: '',
        orderType: '',
        containerNum: '',
        invoiceType: '',
        taxRate: '',
        handlerId: '',
        // 费用信息
        receivableCustAmount: '',
        receivableCustCurrency: 'CNY', // 应收币种 CNY USD
        receivableShipAmount: '',
        receivableShipId: '',
        payableShipAmount: '',
        payableShipCurrency: 'CNY',
        payableStartTruckAmount: '',
        payableEndTruckAmount: '',
        payableInsuranceId: '', // 保险公司id
        payableInsuranceRate: '', // 保险费率
        payableInsuranceAmount: '', // 货值
        payableShipId: '',
        payableStartTruckId: '',
        payableEndTruckId: '',
        // 合同
        contractPics: '',
        // 运输信息
        transportTerms: 'DO-DO',
        startPortId: '',
        consignor: '',
        consignorProvince: '',
        consignorCity: '',
        consignorArea: '',
        consignorAddress: '',
        consignorPhone: '',
        endPortId: '',
        consignee: '',
        consigneePhone: '',
        consigneeProvince: '',
        consigneeCity: '',
        consigneeArea: '',
        consigneeAddress: '',
        loadingTime: '',
        sellerRemark: '',
        consigneeTitle: ''
      },
      rules: {
        custId: [{ required: true, message: formMessage, trigger: 'blur' }],
        containerTypeId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        goodsName: [{ required: true, message: formMessage, trigger: 'blur' }],
        settlementType: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        orderType: [
          { required: true, message: formMessage, trigger: 'change' }
        ],
        containerNum: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        invoiceType: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        taxRate: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        handlerId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        receivableCustAmount: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        // receivableShipAmount: [
        //   { required: true, message: formMessage, trigger: 'blur' }
        // ],
        // receivableShipId: [
        //   { required: true, message: formMessage, trigger: ['blur', 'change'] }
        // ],
        contractPics: [
          { required: true, message: formMessage, trigger: 'change' }
        ],
        transportTerms: [
          { required: true, message: formMessage, trigger: 'change' }
        ],
        startPortId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        consignor: [{ required: true, message: formMessage, trigger: 'blur' }],
        consignorProvince: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        consignorAddress: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        consignorPhone: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        endPortId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        consignee: [{ required: true, message: formMessage, trigger: 'blur' }],
        consigneeProvince: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        consigneeAddress: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        consigneePhone: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        loadingTime: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        consigneeTitle: [
          { required: true, message: formMessage, trigger: 'blur' }
        ]
        // payableInsuranceAmount: [
        //   { required: true, message: formMessage, trigger: 'blur' }
        // ],
        // payableInsuranceId: [
        //   { required: true, message: formMessage, trigger: ['blur', 'change'] }
        // ]
      },
      visible: false,
      insuranceIndex: undefined,
      insuranceRate: undefined,
      calcResult: '',
      goodsList: [],
      createStatus: false,
      limitPrice: 999999999999.99
    }
  },
  methods: {
    getLimitPriceRequest (e, status) {
      let _s = this
      getPriceLimitInfo(e).then(res => {
        // console.log(res.data)
        const originPrice = _s.form.payableShipAmount
        if (res.data) {
          _s.limitPrice = res.data.price
          _s.form.payableShipAmount = res.data.price
        }
        // console.log(`原价：${originPrice}`)
        // console.log(`限价：${res.data.price}`)
        if (status) {
          if (res.data && (originPrice !== res.data.price)) {
            this.$confirm({
              title: '应付海船费用依据限价管理产生变化，请确认后提交',
              okText: '提交',
              okType: 'primary',
              onOk () {
                _s.addOrderRequest({
                  ..._s.form
                })
              },
              onCancel () {
                _s.createStatus = false
              }
            })
          } else {
            _s.addOrderRequest({
              ..._s.form
            })
          }
        }
      })
    },
    goodsSelect () {
      this.goodsListRequest({
        pageSize: 0,
        status: 1
      })
    },
    goodsListRequest (e) {
      queryGoodsData(e).then(res => {
        // // console.log(res.data)
        this.goodsList = res.data.list
      })
    },
    goodsListChange (e) {
      this.goodsListRequest({
        pageSize: 0,
        name: e,
        status: 1
      })
    },
    portListRequest (e, type) {
      queryPortNameList(e)
        .then(res => {
          if (type === 1) {
            this.startPortList = res.data
          } else if (type === 2) {
            this.endPortList = res.data
          }
        })
        .catch(rs => {})
    },
    startPortChange (e) {
      this.portListRequest({
        nameLike: e,
        status: 1
      }, 1)
    },
    endPortChange (e) {
      this.portListRequest({
        nameLike: e,
        status: 1
      }, 2)
    },
    portListReset () {
      this.portListRequest({
        status: 1
      }, 1)
      this.portListRequest({
        status: 1
      }, 2)
    },
    radioChange (e) {
      // // console.log(e.target.value)
      this.form.transportTerms = e.target.value
      this.form.startPortId = ''
      this.form.consignor = ''
      this.form.consignorProvince = ''
      this.form.consignorCity = ''
      this.form.consignorArea = ''
      this.form.consignorAddress = ''
      this.form.consignorPhone = ''
      this.form.endPortId = ''
      this.form.consignee = ''
      this.form.consigneePhone = ''
      this.form.consigneeProvince = ''
      this.form.consigneeCity = ''
      this.form.consigneeArea = ''
      this.form.consigneeAddress = ''
      this.form.consigneeTitle = ''
    },
    insuranceSelect (val, option) {
      this.insuranceIndex = option.key
      this.insuranceRate = this.insuranceList[option.key].insuranceRate
      this.form.payableInsuranceRate = this.insuranceList[option.key].insuranceRate
      this.calcTotalPrice()
    },
    calcTotalPrice () {
      let price = Number(this.form.payableInsuranceAmount)
      if (this.insuranceRate) {
        let insuranceRate = Number(this.insuranceRate)
        if (!isNaN(price) && !isNaN(insuranceRate)) {
          this.calcResult = ((price * insuranceRate) / 100).toFixed(2)
        } else {
          this.calcResult = ''
        }
      }
    },
    custNameListRequest (e, type) {
      queryCustNameList(e)
        .then(res => {
          // // console.log(res)
          if (type === 1) {
            this.custNameList = res.data
          } else if (type === 2) {
            this.receiveList = res.data
          } else if (type === 3) {
            this.payList = res.data
          }
        })
        .catch(rs => {})
    },
    queryAddress () {
      queryBaseAreaList({})
        .then(res => {
          this.options = res.data
        })
        .catch(rs => {})
    },
    containerListRequest (e) {
      queryContainerTypeList(e)
        .then(res => {
          this.containerList = res.data
        })
        .catch(rs => {})
    },
    insuranceListRequest (e) {
      queryCustInsuranceDown(e)
        .then(res => {
          this.insuranceList = res.data
        })
        .catch(rs => {})
    },
    addOrderRequest (e) {
      addOrderInfo(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('创建成功！')
            setTimeout(() => {
              this.createStatus = false
              this.$router.push({
                path: '/salesCenter/createBussinessOrder/success'
              })
            }, 800)
          }
        })
        .catch(rs => {
          this.createStatus = false
        })
    },
    getValidContractPicsRequest (e) {
      getValidContractPics(e).then(res => {
        // // console.log(res.data)
        this.form.contractPics = res.data
      })
    },
    onSearch (searchText) {
      this.custNameListRequest(
        {
          status: 1,
          nameLike: searchText,
          belongCompany: 'JIA_HUA',
          custTypeLike: 'CUSTOMER'
        },
        1
      )
    },
    onSelect (val, option) {
      // console.log(val)
      // console.log(option)
      // let curentCustId = this.custNameList[option.key].id
      // // console.log(curentCustId)
      // this.form.custId = curentCustId
      // this.form.settlementType = this.custNameList[option.key].settlementType
      // this.selectObj = this.custNameList[option.key]
      // this.getValidContractPicsRequest({
      //   id: curentCustId
      // })
      let settlementType
      this.custNameList.forEach(v => {
        if (v.id === val) {
          settlementType = v.settlementType
        }
      })
      this.form.settlementType = settlementType
    },
    onSearch2 (searchText) {
      this.custNameListRequest(
        {
          status: 1,
          nameLike: searchText,
          belongCompany: 'JIA_HUA',
          custTypeLike: 'SUPPLIER',
          isReceivable: 1
        },
        2
      )
    },
    onSelect2 (val, option) {
      this.form.receivableShipId = this.receiveList[option.key].id
    },
    onSearch3 (searchText) {
      this.custNameListRequest(
        {
          status: 1,
          nameLike: searchText,
          belongCompany: 'JIA_HUA',
          custTypeLike: 'SUPPLIER',
          isPayable: 1
        },
        3
      )
    },
    onSelect3 (val, option) {
      this.form.payableShipId = this.payList[option.key].id
    },
    onSelect4 (val, option) {
      this.form.payableStartTruckId = this.payList[option.key].id
    },
    onSelect5 (val, option) {
      this.form.payableEndTruckId = this.payList[option.key].id
    },
    showModal () {
      this.visible = true
    },
    insuranceOk () {
      if (
        this.form.payableInsuranceId &&
        this.form.payableInsuranceRate &&
        this.form.payableInsuranceAmount
      ) {
        this.visible = false
      } else {
        this.$message.error('填写信息有误！')
        return false
      }
    },
    insuranceCancel () {
      this.calcResult = ''
      this.insuranceIndex = undefined
      this.insuranceRate = undefined
      this.form.payableInsuranceId = ''
      this.form.insuranceRate = ''
      this.form.payableInsuranceAmount = ''
    },
    contractPics (e) {
      this.form.contractPics = e
    },
    onChange (value, selectedOptions) {
      this.form.consignorProvince = value[0]
      this.form.consignorCity = value[1]
      this.form.consignorArea = value[2]
    },
    onChange2 (value, selectedOptions) {
      this.form.consigneeProvince = value[0]
      this.form.consigneeCity = value[1]
      this.form.consigneeArea = value[2]
    },
    onChangeTime (date, dateString) {
      this.form.loadingTime = dateString
    },
    save () {
      let _s = this
      // if (!/^1[3456789]\d{9}$/.test(_s.form.consignorPhone)) {
      //   this.$message.error('起运地联系电话格式不正确')
      //   return false
      // }
      // if (!/^1[3456789]\d{9}$/.test(_s.form.consigneePhone)) {
      //   this.$message.error('目的地联系电话格式不正确')
      //   return false
      // }
      // if (!_s.createStatus) {
      //   _s.$message.error('请勿重复提交！')
      //   return false
      // }
      let _form = _s.form
      let payableShipAmount = _form.payableShipAmount || _form.payableShipAmount === 0
      let payableShipId = _form.payableShipId
      let payableStartTruckAmount = _form.payableStartTruckAmount || _form.payableStartTruckAmount === 0
      let payableStartTruckId = _form.payableStartTruckId
      let payableEndTruckAmount = _form.payableEndTruckAmount || _form.payableEndTruckAmount === 0
      let payableEndTruckId = _form.payableEndTruckId
      if ((!payableShipAmount && payableShipId) || (payableShipAmount && !payableShipId)) {
        _s.$message.error('应付 海船费用、海船公司信息不完整！')
        return false
      }
      if ((!payableStartTruckAmount && payableStartTruckId) || (payableStartTruckAmount && !payableStartTruckId)) {
        _s.$message.error('应付 始拖车费、始拖车公司信息不完整！')
        return false
      }
      if ((!payableEndTruckAmount && payableEndTruckId) || (payableEndTruckAmount && !payableEndTruckId)) {
        _s.$message.error('应付 终拖车费、终拖车公司信息不完整！')
        return false
      }

      _s.$refs.form.validate(valid => {
        if (valid) {
          _s.createStatus = true
          if (payableShipAmount && payableShipId) {
            _s.getLimitPriceRequest({
              startPortId: _form.startPortId,
              endPortId: _form.endPortId,
              containerTypeId: _form.containerTypeId,
              payShipId: _form.payableShipId,
              loadingTime: _form.loadingTime
            }, true)
          } else {
            _s.addOrderRequest({
              ..._s.form
            })
          }
        }
      })
    },
    handlerListRequest (e) {
      querySellerDown(e)
        .then(res => {
          // // console.log(res)
          this.handlerList = res.data
        })
        .catch(rs => {})
    }
  },
  mounted () {
    this.custNameListRequest(
      {
        status: 1,
        nameLike: '',
        belongCompany: 'JIA_HUA',
        custTypeLike: 'CUSTOMER'
      },
      1
    )
    this.custNameListRequest(
      {
        status: 1,
        nameLike: '',
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        isReceivable: 1
      },
      2
    )
    this.custNameListRequest(
      {
        status: 1,
        nameLike: '',
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        isPayable: 1
      },
      3
    )
    this.goodsListRequest({
      pageSize: 0,
      name: '',
      status: 1
    })
    this.containerListRequest({
      status: 1
    })
    this.portListRequest({
      status: 1
    }, 1)
    this.portListRequest({
      status: 1
    }, 2)
    this.queryAddress()
    this.insuranceListRequest({
      belongCompany: 'JIA_HUA'
    })
    this.handlerListRequest({
      type: 2,
      dataRole: 'CONTAINER_OPR',
      status: 1
    })
  },
  components: {
    upload
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin: 0px 24px 24px 24px;
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 30px;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .iconTextMix {
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 20px 0;
    padding-left: 24px;
    img {
      width: 25px;
      height: 25px;
    }
    span {
      font-size: 14px;
      margin-left: 10px;
      line-height: 25px;
      font-weight: bold;
    }
  }
  .clickOnlyInput {
    height: 32px;
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }
  .borderframe {
    border: 1px solid #f0f0f0;
    border-top: none;
    margin: 0 50px;
  }
  .border {
    padding: 24px;
    border-top: 1px solid #f0f0f0;
    border-radius: 4px;
  }
}
.ant-col-12 {
  padding-right: 50px;
}
.yewu_photo .ant-form-item {
  margin-bottom: 0;
}
.borderframe .ant-form-item {
  margin-bottom: 2px;
}
.YunSHU {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  padding: 15px 24px 15px 0;
  background: url(../../../static/images/border-r.png) no-repeat right;
  background-size: 1px 100%;
}
</style>
